<template>
    <div>
        <el-page-header title="返回" content="授权·用户" @back="goback">
        </el-page-header>
    </div>
    <div>
        <div>
            <div style="display: flex;float: left;">
                <h3>{{ datas.name }}·授权</h3>
            </div>

            <div style="display: flex;float: right;">
                <el-button type="primary" @click="empower">授权</el-button>
            </div>
        </div>
        <el-descriptions :column="2" direction="vertical" border>
            <el-descriptions-item label="用户">
                {{ datas.name }}
            </el-descriptions-item>
            <el-descriptions-item label="账户">
                {{ datas.account }}
            </el-descriptions-item>
            <el-descriptions-item label="权限">
                <el-tree :data="treedata" :props="defaultProps" :default-expanded-keys="checked"
                    :default-checked-keys="checked" node-key="id" show-checkbox @check-change="rightchange" />
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getMyRights, getRights, giveUserRights } from '../../../api/Right/give/index'
import { useRoute } from 'vue-router'
import { set } from 'lodash';
import { ElMessage, ElMessageBox } from 'element-plus';
export default defineComponent({
    setup() {
        const data = reactive({
            datas: {
                name: '',
                account: ''
            },
            treedata: [] as any[],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            checked: [],
        })

        const Route = useRoute();

        const events = {
            goback() {
                router.go(-1)
            },
            //权限树型数据
            getdata() {
                getRights({
                    page: 1,
                    limit: 999,
                    isBan: 0,
                    isPublish: 1
                }).then((res: any) => {
                    console.log('------======', res)
                    if (res.result == 0) {
                        data.treedata = res.data.data;
                        set(data.treedata.find(d => d.isPublic == 1), 'disabled', true)
                        data.treedata.forEach((item: any) => {
                            if (data.checked.find((d: any) => d == item.id) != undefined) {
                                var num = 0;
                                if (item.children.length > 0) {
                                    item.children.forEach((item2: any) => {
                                        console.log("权限在这", item2.name)
                                        if (data.checked.find(d => d == item2.id) != undefined) {
                                            num++;
                                        }
                                    })
                                    if (num != item.children.length) {
                                        data.checked.forEach((ids, i) => {
                                            if (ids == item.id) {
                                                data.checked.splice(i, 1)
                                            }
                                        })
                                    }
                                }

                            }
                        })
                    }
                })
            },
            //单个权限树型数据
            gettreedata() {
                data.checked = []
                getMyRights({
                    uid: Route.query.id
                }).then((res: any) => {
                    data.checked = res.data
                })
            },
            //树型改变
            rightchange(obj:any,bool:any) {
                console.log("obj", obj)
            console.log("bool", bool)
            if (bool == true) {
                if (obj.parent != null) {
                    if (data.checked.find((d:any) => d == obj.parent) == undefined) {
                        data.checked.push(obj.parent);
                    }
                }
                if (data.checked.find((d:any) => d == obj.id) == undefined) {
                    data.checked.push(obj.id);
                }
            } else {
                if (data.checked.length > 0) {
                    data.checked.forEach((item, index) => {
                        if (item == obj.id) {
                            data.checked.splice(index, 1)
                        }
                    })
                    if (obj.parent != null) {
                        console.log("取消", data.treedata)
                        var num = 0;
                        data.treedata.find(d => d.id == obj.parent).children.forEach((item:any) => {
                            if (data.checked.find(d => d == item.id) != undefined) {
                                num = 1;
                            }
                        });
                        if (num == 0) {
                            data.checked.forEach((item, index) => {
                                if (item == obj.parent) {
                                    data.checked.splice(index, 1)
                                }
                            })
                        } else {
                            if (data.checked.find((d:any) => d == obj.parent) == undefined) {
                                data.checked.push(obj.parent);
                            }
                        }
                    }
                }
            }
            },
            //授权
            empower() {
                ElMessageBox.confirm(
                    '确定要授权吗?',
                    {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(() => {
                    console.log(11111)
                        giveUserRights({
                            uid: Route.query.id,
                            rids: data.checked
                        }).then((res: any) => {
                            console.log('\\\\\\', res)
                            if (res.result === 0) {
                                ElMessage({
                                    type: 'success',
                                    message: '授权成功',
                                })
                                router.push('/right/give')
                            } else {
                                ElMessage({
                                    type: 'error',
                                    message: '授权失败',
                                })
                            }
                        })


                    })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '该操作已取消',
                        })
                    })
            }
        }

        onMounted(() => {
            events.gettreedata();
            const dataJsonStr: any = sessionStorage.getItem("data");
            data.datas = JSON.parse(dataJsonStr);
            console.log('///////', data.datas)
            events.getdata();
        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>